import React from 'react';
import {Flex, Modal, Space, Table, Tag} from "antd";
import LogFactory from "log/LogFactory";
import {useReimburseAndState} from "./DetailsComponent";
import {ColumnsType} from "antd/es/table";
import {ReimburseDetailsType} from "type/ReimburseDetailsType";
import {ellipsisHandler} from "util/ColumnsUtil";

const log = LogFactory.getLog("Reimburse.DetailsBoard") ;
const detailsColumns: ColumnsType<ReimburseDetailsType> = [
    {
        title: '序号' ,
        dataIndex: 'index',
        width: 60,
        align: "center" ,
        render: (value, record, index) => {
            return <strong>{index + 1}</strong> ;
        }
    },
    {
        title: '项目' ,
        key: 'item',
        dataIndex: 'item',
        align: "center",
        width: 90,
    },
    {
        title: '金额' ,
        key: 'consumeMoney',
        dataIndex: 'consumeMoney',
        align: "center",
        width: 80,
    },
    {
        title: '时间' ,
        key: 'consumeDate' ,
        dataIndex: 'consumeDate',
        align: "center",
        width: 110,
    },
    {
        title: '备注' ,
        key: 'remark',
        dataIndex: 'remark',
        align: "center",
        ellipsis: {showTitle: false},
        render:  ellipsisHandler
    }
] ;

const DetailsBoardComponent = () => {
    const { reimburseId,state,dispatch,navigate } = useReimburseAndState();
    const onCancel = () => {
        navigate(".",{replace: true,state: {reimburseId: reimburseId,totalAmount: state.totalMoney }}) ;
    } ;

    const tableTitle = (
        <Space>
            <span>报销单</span>
            <Tag color={"#6449ad"}>{reimburseId}</Tag>
        </Space>
    ) ;

    const caption = (
        <Flex gap={10} style={{
            fontSize: "1.2em",
            paddingInlineEnd: "10px"
        }} justify={"right"}>
            <span style={{
                color: "#f40",
                fontWeight: "bold",
            }}>合计金额 :</span>
            <span>{state.totalMoney} ¥</span>
        </Flex>
    ) ;

    return (
        <Modal
            destroyOnClose={true}
            title={tableTitle}
            open={true}
            onCancel={onCancel}
        >
            <Table<ReimburseDetailsType>
                columns={detailsColumns}
                caption={caption}
                // pagination={false}
                dataSource={state.data}
            />
        </Modal>
    );
};

export default DetailsBoardComponent;